import * as THREE from "three";

const sizes = {
  width: 800,
  height: 600,
};

/*
    获取鼠标光标位置
*/
const cursor = {
  x: 0,
  y: 0,
};
window.addEventListener("mousemove", (event) => {
  cursor.x = event.clientX / sizes.width - 0.5;
  cursor.y = event.clientY / sizes.height - 0.5;
  //   console.log(cursor.x, cursor.y);
});

//创建第一个场景
const scene = new THREE.Scene();

//创建物体
//几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//材质
const material = new THREE.MeshBasicMaterial({ color: "orange" });
//创建网格
const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景
scene.add(cube);

//创建摄像机
const camera = new THREE.PerspectiveCamera(60, sizes.width / sizes.height);
//相机位置
// camera.position.x = 2;
// camera.position.y = 2;
camera.position.z = 2;

camera.lookAt(cube.position);

// 将相机加入场景
scene.add(camera);

//创建渲染器材
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
document.body.appendChild(renderer.domElement);

const clock = new THREE.Clock();
const change = () => {
  //   let term = clock.getElapsedTime();
  //   cube.rotation.y = term;

  //更新相机,我们可以设置幅度
  //放在正弦余弦中的值要一样，后面乘上的是距离
  camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 4;
  camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 4;

  camera.position.y = -cursor.y * 3;
  camera.lookAt(cube.position);

  renderer.render(scene, camera);
  window.requestAnimationFrame(change);
};
change();
